<template>
  <view>
    <cloudUpdateVersion
      :show="versionShow"
      :version="version"
      :newVersion="newVersion"
      :download="download"
      @show="setVersionShow"
    />
    <cloudSetPayPassword
      :show="payPasswordSetShow"
      @close="setPayPasswordSetShow(false)"
      @keyboardDone="updatePayPassword"
    >
      <view slot="content">
        <view class="grace-flex grace-flex-center">
          <view class="paySetInput">
            <view class="grace-flex grace-flex-center">
              <image src="/static/pay_icon.png" class="set-pay-pass-icon" />
            </view>
            <view class="font-34 color-b1 grace-text-center mt-20 mb-40">请输入6位数字支付密码</view>
          </view>
        </view>
      </view>
    </cloudSetPayPassword>
  </view>
</template>

<script>
import { getStorage, setStorage } from "@/utils";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  async created() {
    if (!getStorage("versionShow", false)) {
      setStorage("versionShow", true, 24 * 3600 * 3);
      this.checkVersion();
    } else {
      await this.loadSettings();
    }
  },
  computed: {
    ...mapState("user", ["payPasswordSetShow", "realSetShow"]),
    ...mapState("system", ["versionShow"]),
    ...mapGetters("system", ["version", "newVersion", "download"])
  },
  methods: {
    ...mapMutations("user", ["setPayPasswordSetShow", "setRealSetShow"]),
    ...mapActions("user", ["setPayPassword"]),
    ...mapMutations("system", ["setVersionShow"]),
    ...mapActions("system", ["loadSettings", "checkVersion"]),
    async updatePayPassword({ password }) {
      this.setPayPassword({ password });
      this.setPayPasswordSetShow(false);
    }
  }
};
</script>

<style scoped>
.set-pay-pass-icon {
  width: 97rpx;
  height: 104rpx;
}
</style>
